<div data-role="page" id="list_parking_lots">
	<div data-role='header' data-position='inline' data-theme='d'>
		<h1>GT Parking Finder</h1>
		<div data-role="navbar" class="ui-navbar ui-navbar-noicons" role="navigation">
			<ul class="ui-grid-b">
				<li class="ui-block-a"></li>
				<li class="ui-block-b"></li>
			</ul>
		</div>
	</div>
	<div id="content" data-role="content" >
		<div id="button_group_findDirections" data-role="controlgroup" data-type="horizontal" class="center" style="width: 250px">
			<a id='availBtn' data-transition="fade" data-role="button" data-lid="2">Avail.</a>
			<a id='distBtn' data-transition="fade" data-role="button" data-lid="2">Dist.</a>
		</div>
	</div>
	
	<ul id="plot_list" data-role="listview" data-inset="true" data-filter="true" data-theme="c" data-divider-theme="b">
		<script id="plot_template" type="text/x-jquery-tmpl">
			<li class="plot_row" data-filtertext="${tag_list}" id="parkinglot_${b_id}">
			<a href='#list_a_lots_information' data-transition="fade">
			<h1>${name}</h1>
			<p>Free Spaces: ${max_size-cur_occupied} as of ${update_date_time}</p>
			</a>
			</li>
		</script>
	</ul>
</div>
<!--******************************************************************************************************************************-->
<div data-role="page" id="list_a_lots_information">
	<a id="add_button" href="#plot_directions" data-direction="reverse" data-icon="plus" data-theme="d">Route me to it</a>
	<div id="content" data-role="content" >
		<div id="button_group_getDirections" data-role="controlgroup" data-type="horizontal" class="center" style="width: 250px">
			<a id='directBtn' data-transition="fade" data-role="button" data-lid="2">Directions</a>
		</div>
	</div>
	<script id="plot_info_template" type="text/x-jquery-tmpl">
		<div id="plot_info">
		<div data-role="header" data-position="inline" data-theme='d'>
		<a href="#list_parking_lots" data-direction="reverse" data-icon="back" data-theme="d">Cancel</a>
		<h1 class='head_title'>${name}</h1>
		</div>
		<div id="directions_map_canvas" style="width:300px; height:300px" class="center"></div>
		<label>Address: </label></label><p>${street_num}${street_name},${city},${state} ${zip}</p>
		</div>
	</script>
</div>
<!--******************************************************************************************************************************-->
<div data-role="page" id="plot_directions">
	<div data-role="header" data-position="inline" data-theme='d'>
		<a href="#list_a_lots_information" data-direction="reverse" data-icon="back" data-theme="d">Cancel</a>
		<h1 class='head_title'></h1>
	</div>
	<div id="content" data-role="content" >
		<a id='directBtn_1' data-transition="fade" data-role="button" data-lid="2">Directions</a>
		<div id="button_group_getDirections" data-role="controlgroup" data-type="horizontal" class="center" style="width: 250px">
		</div>
	</div>
</div>
<!--******************************************************************************************************************************-->
<div data-role="dialog" id="error_dialog" >
	<div data-role="header" data-position="inline" data-theme='d'>
		<h1 role="heading">Error</h1>
	</div>
	<div id="error_dialog_content" data-role="content">
		<script id="error_message_template" type="text/x-jquery-tmpl">
			<div id="error_message">
			<center>
			<p>	An unexpected error occurred<br />
			<span id="errorName">${errorName}</span><br />
			<span id="errorDescription">${errorDescription}</span>
			</p>
			</center>
			</div>
		</script>
	</div><!-- /content -->
</div><!-- /dialog -->